import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/home/HomePage.vue'
import ArticleDetail from '@/views/article/index.vue'
import MainLayout from '@/views/Layout/MainLayout.vue'

const routes = [
  {
    path: '/',
    component: MainLayout,
    children: [
      {
        path: '',
        name: 'Home',
        component: Home,
        meta: { title: '首页' },
      },
      {
        path: 'article/:id',
        name: 'ArticleDetail',
        component: ArticleDetail,
        meta: { title: '文章详情' },
      },
      {
        path: '/albums',
        name: 'Albums',
        component: () => import('@/views/albums/index.vue'),
        meta: { title: '相册' },
      },
      {
        path: '/albums/:id',
        name: 'AlbumDetail',
        component: () => import('@/views/albums/detail.vue'),
        meta: {
          title: '相册详情',
          activeMenu: '/albums',
        },
      },
      {
        path: '/timeline',
        name: 'TimeLine',
        component: () => import('@/views/timeline/index.vue'),
        meta: { title: '时间轴' },
      },
      {
        path: '/message',
        name: 'Message',
        component: () => import('@/views/message/index.vue'),
        meta: { title: '留言板' },
      },
      {
        path: '/moments',
        name: 'Moments',
        component: () => import('@/views/moments/index.vue'),
        meta: { title: '朋友圈' },
      },
      {
        path: '/article',
        name: 'Article',
        component: () => import('@/views/article/index.vue'),
        meta: { title: '文章' },
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('@/views/about/index.vue'),
        meta: { title: '关于' },
      },
      {
        path: '/navigator',
        name: 'Navigator',
        component: () => import('@/views/navigator/index.vue'),
        meta: { title: '百宝箱' },
      },
    ],
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 设置页面标题
  document.title = to.meta.title ? `${to.meta.title} - 个人博客` : '个人博客'
  next()
})

export default router
